<template>
  <div class="white" v-if="data">
    <div class="top">
      <img :src="this.data.usermessage[0].avatar" alt="" />
      <div class="right">
        <div class="floor-1">
          <button class="btn" v-if="Id==LoginState[0].id" @click="GoSon(4,'/UserFeil/edit')">编辑</button>
          <button class="btn" v-else>关注</button>
          <div>
            <p>{{this.data.usermessage[0].nickname}}</p>
            <span :class="{lv1:userLevel>5,lv2:userLevel>12}">Lv.{{userLevel}}</span>
          </div>
          <p>通行证:{{Id}}</p>
          <li>
            <img src="@/assets/text.svg" alt="" />
            <span>{{this.data.usermessage[0].leaveMessage}}</span>
          </li>
        </div>
        <ul class="floor-2">
          <li><span>{{this.data.isFollowCount}}</span><span>粉丝</span></li>
          <li><span>{{this.data.followCount}}</span><span>关注</span></li>
        </ul>
      </div>
    </div>
    <div class="bottom">
      <div class="left">
        <p>个人中心</p>
        <ul class="left-nav" v-if="IsMine">
          <li :class="{active:selected==1}" @click="GoSon(1,'/UserFeil/replyList?id='+Id)">我的评论</li>
          <li :class="{active:selected==2}" @click="GoSon(2,'/UserFeil/bookList?id='+Id)">我的收藏</li>
          <li :class="{active:selected==3}" @click="GoSon(3,'/UserFeil/followList?id='+Id)">我的关注</li>
          <li :class="{active:selected==4}" @click="GoSon(4,'/UserFeil/edit?id='+Id)">编辑资料</li>
        </ul>
        <ul class="left-nav" v-else>
          <li :class="{active:selected==1}" @click="GoSon(1,'/UserFeil/replyList?id='+Id)">评论</li>
          <li :class="{active:selected==2}" @click="GoSon(2,'/UserFeil/bookList?id='+Id)">收藏</li>
          <li :class="{active:selected==3}" @click="GoSon(3,'/UserFeil/followList?id='+Id)">关注</li>
        </ul>
      </div>
      <div class="right">
        <p>我的评论</p>
        <router-view/>
      </div>
    </div>
  </div>
</template>

<script>
import upLoad from "@/components/upLoad.vue";
import { mapState } from 'vuex';
export default {
  components: { upLoad },
  methods: {
    GoSon(n,url){
      if(n==this.$route.meta.active)return
      this.selected = n
      this.$router.push(url)
    },
    getData(n,callback){
      this.axios.get('/user/userMes?id='+n).then(res=>{
        callback(res)
      })
    }
  },
  mounted() {
    console.log(this.LoginState)
    let id = this.$route.query.id 
    if(this.LoginState.length&&id==this.LoginState[0].id){this.IsMine=1}
    this.getData(id,(data)=>{
      this.data = data.data.data
      this.userLevel = this.data.usermessage[0].level
      if(this.data.usermessage[0].id == this.LoginState[0].id) this.IsMine=1
    })
    
  },
  data() {
    return {
      userLevel: 18,
      selected:this.$route.meta.active,
      Id:this.$route.query.id,
      IsMine:0,
      data:null
    }
  },
  computed:{
    ...mapState(['LoginState'])
  },
  watch:{
    LoginState(new1,old){
      console.log('old',old,'new1',new1)
      if(new1.length==0){
        this.IsMine=0
      }
      if(new1.length==1){
        this.IsMine=1
      }
    }
  }
};
</script>


<style  scoped>
.white {
  margin: 66px auto 0;
  width: 60%;
  padding: 30px;
  /* background:#000; */
  /* height: 100vh; */
}
.top {
  background: #fff;
  padding: 30px 40px;
  border-radius: 10px;
  display: flex;
}
.top > img {
  width: 120px;
  height: 120px;
  margin-right: 20px;
  border-radius: 100%;
}
.right .floor-1 {
  padding: 0px 0 8px;
  border-bottom: 1px solid #f0f0f0;
  font-weight: 400;
}
.floor-1 > div {
  width: 600px;
  display: flex;
  align-items: center;
  margin-bottom: 6px;
}
.floor-1 > div > span {
  font-size: 12px;
  background: #4cc3ff;
  color: #fff;
  height: 50%;
  margin-left: 10px;
}
.floor-1 > div > span.lv1{
  background: #969CF2;
}
.floor-1 > div > span.lv2{
  background: #FFBF00;
}
.floor-1 > div > button {
  padding: 10px;
}
.floor-1 > p {
  color: #999;
  font-size: 12px;
  margin-bottom: 6px;
}
.floor-1 > li {
  display: flex;
  align-items: center;
  margin-bottom: 6px;
  font-size: 14px;
}
.floor-1 > li img {
  width: 16px;
  margin-right: 6px;
}
.right .floor-2 {
  display: flex;
  padding-top: 20px;
}
.floor-2 li {
  font-size: 14px;
  color: #999;
  display: flex;
  align-items: center;
  margin-right: 20px;
}
.floor-2 li span:nth-child(1) {
  font-size: 16px;
  font-weight: 400;
  color: #000;
}
.floor-2 li span:nth-child(2) {
  margin-left: 8px;
}
.btn {
  float: right;
  background-color: #fff;
  color: #00b2ff;
  border: 1px solid #00c3ff;
  border-radius: 4px;
  padding: 6px 28px;
}
.bottom{
  margin-top: 20px;
  display: flex;
}
.bottom .left{
  background: #fff;
  border-radius: 10px;
  width: 30%;
}
.bottom .left p{
  padding: 0 30px;
  line-height: 50px;
  border-bottom: 1px solid #f0f0f0;
}
.bottom .left ul{
  padding: 0 30px;
  user-select: none;
}
.bottom .left li{
  padding: 0 30px;
  line-height: 50px;
  font-size: 14px;
}
.bottom .left li.active{
  color:#00b2ff;
}
.bottom .right{
  margin-left: 20px;
  background: #fff;
  border-radius: 10px;
  width: 70%;
}
.bottom .right p{
  padding: 0 30px;
  line-height: 50px;
  border-bottom: 1px solid #f0f0f0;
}

</style>